<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/simpleapp/mic/organic/dojo1836/dijit/themes/claro/claro.css">
<script type="text/javascript">
var dojoConfig = {
 //baseUrl: "/simpleapp/js",
 usePlainJson:true,
 parseOnLoad:true,
 cacheBust:false,
 async:false,
 isDebug: true,
 //modulePaths : { 'graphtest' : '../../../../js/graphtest' },
 packages: [
    {
      name: "graphtest",
      location: '../../../../js/graphtest'
    }
  ]
}; //  data-dojo-config="locale:'it-it'"
</script>
<script src="/simpleapp/mic/organic/dojo1836/dojo/dojo.js.uncompressed.js"></script>
<script src="/simpleapp/d3/d3.min.js"></script>

<style>

.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

.node circle {
  fill: rgb(248, 17, 17);
  stroke: #fff;
  stroke-width: 1.5px;
}

.arc {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

.node
{
  fill: #000;
}

.square {
   width: 30px;
   height: 30px;
   border: 1px;
   border-color: black;
   background-color: white;
}

text {
  font: 10px sans-serif;
  pointer-events: none;
}

.myTextBox {
   border: 1px solid black;
   margin: 0px auto;
   display: none;
   width: 100px;
   height: 100px;
   background-color: grey;
   font: 14px 'Verdana';
}

.svg {
  border: 1px solid black;
  background-color: white;
}

.polygon {
  fill: #33CC33;
  stroke: white;
  stroke-width: 1;
}

.polygonSelected {
  fill: red;
  stroke: white;
  stroke-width: 1;
}

.nodeLabel {
  font-size: 10px;
  fill: #EC1010;
  font-family: sans-serif;
  text-anchor: middle;
}

.selectedNodeLabel {
  font-size: 10px;
  fill: black;
  font-family: sans-serif;
  font-weight: bold;
  text-anchor: middle;
}

.rect {
   fill: none;
   pointer-events: all;
}

.info_circle {
  fill: #fff;
  stroke: #000;
  stroke-width: 2;
}

/* chart */

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  /*fill: steelblue;*/
}

.selected_bar {
  fill: #00D6FF;
  stroke: black;
}

.x.axis path {
  display: none;
}

/* end chart*/


</style>
<script>
dojo.require("dijit/form/Button");
dojo.require("dijit/form/NumberTextBox");
var mo = null;

console.log('main starts at', new Date());
  require([ "graphtest/MainObject", "dojo/domReady" ], 
    function(MainObject, ready)
    {
      ready(function() {
        mo = new MainObject();
      });
    });
</script>
</head>
<body class="claro">
  <div>
    <div type="button" data-dojo-type="dijit/form/Button" data-dojo-id="ui.addNode">Add Node</div>
    <div type="button" data-dojo-type="dijit/form/Button" data-dojo-id="ui.delNode">Del Node</div>
    <div type="button" data-dojo-type="dijit/form/Button" data-dojo-id="ui.addLink">Add Ring Link</div>
    <div type="button" data-dojo-type="dijit/form/Button" data-dojo-id="ui.delLink">Del All Link</div>
    <div type="button" data-dojo-type="dijit/form/Button" data-dojo-id="ui.delBetweenLink">Del Link Between</div>
    <div id="graph_editor_container" style="float:left;"></div>
  </div>
  
  <div id="graph_form">
    <div id="graph_container" style="float:left;"></div>
    <div id="input_container" style="float:left;clear:right;">
      <div>
        <div style="float:left;padding-right:5px;width:170px;">Dice number [0,20]</div>
        <input style="float:left;clear:right;width:50px;" data-dojo-id="ui.diceNumber" type="text"
        data-dojo-type="dijit/form/NumberTextBox"
        name= "diceNumber"
        required="true"
        value="4"
        data-dojo-props="constraints:{min:1,max:20,places:0},
        invalidMessage:'Invalid number'" />
      </div>
      <div>
        <div style="float:left;padding-right:5px;width:170px;">Number of faces [0,20]</div>
        <input style="float:left;clear:right;width:50px;" data-dojo-id="ui.faceNumber" type="text"
        data-dojo-type="dijit/form/NumberTextBox"
        name= "faceNumber"
        required="true"
        value="6"
        data-dojo-props="constraints:{min:1,max:20,places:0},
        invalidMessage:'Invalid number'" />
      </div>
      <div style="clear:both;" type="button" data-dojo-type="dijit/form/Button" data-dojo-id="ui.submitDice">Roll</div>
    </div>
  </div>
</body>
</html>
